/*
 * @Author: hanyu 
 * @Date: 2018-05-07 09:39:45 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-06-22 16:43:02
 */
<template>
    <div>
      <el-row type="flex">
        <div class="topCon-5">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
	          <div class="itemTop">
		          	<div class="itemTop-tit">
		          		<span style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>面积统计(平方米)</span>
		          	</div>
		          	<div class="itemTop-val">
		          		<div class="itemTopText">占地总面积</div>
		                <b class="boldFont">
		                  <i-count-up :startVal="startVal" :endVal="endVal.occupyArea" :decimals="decimals" :duration="duration" :options="options" />
		                </b>
		                <div class="itemTop-val-row">
		                	<div class="item-3">
		                		<div class="itemTopText">累计成交</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.sumDealBldArea" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                	<div class="item-3">
		                		<div class="itemTopText">当月成交</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.currentMonthDealBldArea" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
                      <div class="item-3">
		                		<div class="itemTopText">剩余面积</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.residualArea" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                </div>
		          	</div>
	          </div>
          </el-col>
        </div>
        <div class="topCon-5">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
	          <div class="itemTop">
		          	<div class="itemTop-tit">
		          		<span style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>成交量统计(套)</span>
		          	</div>
		          	<div class="itemTop-val">
		          		<div class="itemTopText">累计成交量</div>
		                <b class="boldFont">
		                  <i-count-up :startVal="startVal" :endVal="endVal.sumCount" :decimals="decimals" :duration="duration" :options="options" />
		                </b>
		                <div class="itemTop-val-row">
		                	<div class="item">
		                		<div class="itemTopText">当月成交量</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.currentMonthCount" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                </div>
		          	</div>
	          </div>
          </el-col>
        </div>
        <div class="topCon-5">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
	          <div class="itemTop">
              <div class="itemTop-tit">
		          		<span style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>成交金额统计(万元)</span>
		          	</div>
		          	<div class="itemTop-val">
		          		<div class="itemTopText">累计成交金额</div>
		                <b class="boldFont">
		                  <i-count-up :startVal="startVal" :endVal="endVal.sumDealAmount" :decimals="decimals" :duration="duration" :options="options" />
		                </b>
                    <div class="itemTop-val-row">
		                	<div class="item">
		                		<div class="itemTopText">当月成交金额</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.currentMonthDealAmount" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                </div>
		          	</div>
	          </div>
          </el-col>
        </div>
        <div class="topCon-5">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
	          <div class="itemTop">
              <div class="itemTop-tit">
		          		<span style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>存量统计(套)</span>
		          	</div>
		          	<div class="itemTop-val">
		          		<div class="itemTopText-1">当前库存总量</div>
		                <b class="boldFont">
		                  <i-count-up :startVal="startVal" :endVal="endVal.stockCount" :decimals="decimals" :duration="duration" :options="options" />
		                </b>
		          	</div>
	          </div>
          </el-col>
        </div>
        <div class="topCon-5">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
	          <div class="itemTop">
		          	<div class="itemTop-tit">
		          		<span style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>销售应收回款(万元)</span>
		          	</div>
		          	<div class="itemTop-val">
		          		<div class="itemTopText">总应收回款</div>
		                <b class="boldFont">
		                  <i-count-up :startVal="startVal" :endVal="endVal.accounts" :decimals="decimals" :duration="duration" :options="options" />
		                </b>
		                <div class="itemTop-val-row">
		                	<div class="item">
		                		<div class="itemTopText">逾期应收</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.overdue" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                	<div class="item">
		                		<div class="itemTopText">未到期应收</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.undue" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                </div>
		          	</div>
	          </div>
          </el-col>
        </div>
      </el-row>
      <el-row type="flex">
    			<div class="midCon-dc">
            <el-row type="flex" justify="space-between" style="width:100%;padding:25px 36px 0px;">
                <div class="radioBtnBlue">
                  <el-radio-group @change="fetchData"  v-model="defaultTimeType">
                  <el-radio-button label="3001">今日</el-radio-button>
                  <el-radio-button label="3007">本周</el-radio-button>
                  <el-radio-button label="3008">本月</el-radio-button>
                  <el-radio-button label="3009">季度</el-radio-button>
                  <el-radio-button label="3010">年度</el-radio-button>
                </el-radio-group>
                </div>
            </el-row>
    				<el-row type="flex" justify="space-between" style="width:100%">
    					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">      
    						<div class="topRightLLine">
    							<div class="topRightTextCon">
    								<div class="topRightLTopTitleLine-dc">
    								</div>
    								<span class="topRightLTopTitle">成交面积<span class="song">统计</span>(平方米)</span>
    							</div>
    							<div class="dcTopRightCon">
                    累计成交面积：
    								<b class="boldFont">
				              <i-count-up :startVal="startVal" :endVal="areaStatisticsVal" :decimals="decimals" :duration="duration" :options="options" />
				            </b> 
    							</div>
    						</div>
                <chart-lay-out :showTitle="false">
                  <bar-charts slot="main" v-model="areaStatisticsOption" :option="areaStatisticsOp"></bar-charts>
                </chart-lay-out>
                
    					</el-col>
    					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
    						<div class="topRightLLine">
    							<div class="topRightTextCon">
    								<div class="topRightLTopTitleLine-dc">
    								</div>
    								<span class="topRightLTopTitle">成交量<span class="song">统计</span>(套)</span>
    							</div>
    							<div class="dcTopRightCon">
                    累计成交量：
    								   <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="volumeTotal" :decimals="decimals" :duration="duration" :options="options" />
				                </b> 
    							</div>
    						</div>
                <chart-lay-out :showTitle="false">
                  <bar-chart slot="main" v-model="volumeData" :option="{}"></bar-chart>
                </chart-lay-out>
    					</el-col>
    					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
    						<div class="topRightLLine">
    							<div class="topRightTextCon">
    								<div class="topRightLTopTitleLine-dc">
    								</div>
    								<span class="topRightLTopTitle">成交金额<span class="song">统计</span>(万元)</span>
    							</div>
                  <div class="dcTopRightCon">
                    累计成交金额：
    								   <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="volumeMoney" :decimals="decimals" :duration="duration" :options="options" />
				                </b> 
    							</div>
    						</div>
                <chart-lay-out :showLine="false" :showTitle="false">
                  <bar-chart slot="main" v-model="volumeMoneyData"></bar-chart>
                </chart-lay-out>
    					</el-col>
    				</el-row>
    				<div class="lineCon">
    					<div class="dcLineImg"></div>
    				</div>
    				<el-row type="flex" justify="space-between" style="width:100%">
    					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <chart-lay-out>
                    <span slot="title">成交面积趋势</span>
                    <line-chart slot="main" v-model="dealAreaData" :option="dealAreaOption"></line-chart>
                </chart-lay-out>
    					</el-col>
    					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <chart-lay-out>
                    <span slot="title">成交量趋势</span>
                    <line-chart slot="main" v-model="dealTrendData" :option="dealTrendOption"></line-chart>
                </chart-lay-out>
    					</el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                  <el-select  style="width:75px;height:10px;position:absolute;right:30px;top:20px" @change="fetchDealAveragePrice" v-model="dealType">
                    <el-option v-for="item in dealTypeArr" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                 <chart-lay-out :showLine="false">
                    <span slot="title">成交均价走势</span>
                    <div slot="main">
                      <line-chart v-model="dealAceragePriceData" :option="dealAcerageOption"></line-chart>
                    </div>
                </chart-lay-out>
    					</el-col>
    				</el-row>
    			</div>
    		</el-row>
        <el-row class="dcViewBox">
          <el-col :xl="6" :sm="6" :lg="6" :md="6">
              <chart-lay-out>
                  <span slot="title">存量分析(三期)</span>
                  <div slot="main">
                    <pie-chart v-model="stockAnalysisArr"></pie-chart>
                  </div>
              </chart-lay-out>
          </el-col>
          <el-col :xl="6" :sm="6" :lg="6" :md="6">
              <chart-lay-out>
                  <span slot="title">认购量及签约量(三期)</span>
                  <div slot="main">
                    <bar-charts v-model="subscribeSignArr" :option="subscribeOption"></bar-charts>
                  </div>
              </chart-lay-out>
          </el-col>
          <el-col :xl="6" :sm="6" :lg="6" :md="6">
              <chart-lay-out>
                  <span slot="title">应收账款(三期)</span>
                  <div slot="main">
                    <pie-chart v-model="receivableAccountArr"></pie-chart>
                  </div>
              </chart-lay-out>
          </el-col>
          <el-col :xl="6" :sm="6" :lg="6" :md="6">
              <chart-lay-out :showLine="false">
                  <span slot="title">工程进度(三期)</span>
                  <div slot="main">
                    <bar-chart v-model="projectProgressArr" :option="{exchange:true,grid:{left:'20%'}}"></bar-chart>
                  </div>
              </chart-lay-out>
          </el-col>

          <el-col>
            <!-- <div class="row dcViewxBottomItem">
              <div style="width:100%">
                <div  class="topRightLLine">
                  <div class="topRightLTopTitleLine">
                  </div>
                  <span class="topRightLTopTitle">认购量及签约量(三期)</span>
                </div>
                <bar-charts v-model="subscribeSignArr" :option="{hideLineColor:true,itemStyle:{barBorderRadius: [30, 30, 0, 0],},color:['#0c43fd','#8d4cfd']}"></bar-charts>
              </div>
              <div class="chartLine" style="height:290px"></div>
            </div> -->
            <!-- <div class="row dcViewxBottomItem">
              <div style="width:100%;position:relative">
                <div  class="topRightLLine" style="margin-top: 0px;">
                  <div class="topRightLTopTitleLine">
                  </div>
                  <span class="topRightLTopTitle"></span>
                </div>
                <pie-chart v-model="receivableAccountArr" :option="{}"></pie-chart>
              </div>
              <div class="chartLine" style="height:290px;z-index:99;"></div>
            </div> -->
            <!-- <div class="row dcViewxBottomItem">
              <div style="width:100%">
                <div  class="topRightLLine">
                  <div class="topRightLTopTitleLine">
                  </div>
                  <span class="topRightLTopTitle">工程进度(三期)</span>
                </div>
                <bar-chart v-model="projectProgressArr" :option="{exchange:true,grid:{left:'20%'}}"/>
              </div>
            </div> -->
          </el-col>
        </el-row>
    </div>
</template>
<script>
import chart from "@/components/Charts/newChart";
import barCharts from "@/components/Charts/barCharts";
import barChart from "@/components/Charts/barChart";
import lineChart from "@/components/Charts/lineChart";
import pieChart from "@/components/Charts/pieChart";
import ICountUp from "vue-countup-v2";
import {
  GetDataProfileInfoForHousing,
  GetDataByDoubleTargetForTwo, // 双向指标统计
  GetDataByTargetForTwo,
  GetDoubleDetailList,
  GetDetailList
} from "@/api/dc/index";
import bgLayOut from "@/components/bgLayOut/index";
import chartLayOut from "@/components/Charts/chartLayOut";
export default {
  name: "sellAnalysis",
  components: {
    chart,
    ICountUp,
    bgLayOut,
    barCharts,
    barChart,
    lineChart,
    pieChart,
    chartLayOut
  },
  data() {
    return {
      dealAcerageOption: {
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        dataZoom: [
          {
            width: "80%",
            bottom: 49,
            left: "10%"
          }
        ],
        grid: {
          top: "10%"
        },
        color: "#da34fb",
        startColor: "rgba(218,52,251,0.2)",
        lineIconId: 3
      },
      dealTrendOption: {
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        dataZoom: [
          {
            width: "80%",
            bottom: 49,
            left: "10%"
          }
        ],
        grid: {
          top: "10%"
        },
        color: "#3771ff",
        startColor: "rgba(55,113,255,0.4)",
        lineIconId: 2,
        sumName: "成交量"
      },
      dealAreaOption: {
        xAxis: {
          // axisLabel: {
          //   rotate: 45
          // },
          axisTick: {
            interval: 0
          }
        },
        dataZoom: [
          {
            width: "75%",
            bottom: 49,
            left: "15%"
          }
        ],
        grid: {
          top: "10%",
          left: "15%"
        },
        color: "rgb(47,240,210)",
        startColor: "rgba(47,240,210,0.2)",
        lineIconId: 0,
        sumName: "成交面积"
      },
      areaStatisticsVal: 0,
      projectProgressArr: [], // 工程进度
      receivableAccountArr: [], // 应收账款
      subscribeSignArr: [], // 认购和签约量
      subscribeOption: {
        labelDefault: 1,
        grid: { left: "12%" }
      },
      dealType: "28001",
      dealTypeArr: [
        {
          label: "住宅",
          value: "28001"
        },
        {
          label: "商铺",
          value: "28002"
        },
        {
          label: "储藏间",
          value: "28003"
        },
        {
          label: "车位",
          value: "28004"
        }
      ], // 成交类型
      dealAceragePriceData: [], // 成交均价走势
      dealTrendData: [], // 成交量趋势
      dealAreaData: [], // 成交面积趋势
      volumeMoney: 0, // 累计成交金额
      volumeMoneyData: [], // 成交金额
      volumeData: [], // 成交量
      volumeTotal: 0, // 累计成交量
      defaultTimeType: "3010", // 查询timetype
      areaStatisticsOption: [], // 成交面积统计
      areaStatisticsOp: {
        labelDefault: 0,
        grid: {
          left: "14%"
        }
      },
      stockAnalysisArr: [], // 存量分析
      endVal: {
        occupyArea: 0, // 占地面积 ,
        residualArea: 0, // 剩余面积 ,
        sumDealBldArea: 0, // 累计销售面积 ,
        currentMonthDealBldArea: 0, // 本月累计销售面积 ,
        sumCount: 0, // 累计成交套数 ,
        currentMonthCount: 0, // 当月成交套数 ,
        sumDealAmount: 0, // 累计成交金额 ,
        currentMonthDealAmount: 0, // 当月成交金额 ,
        stockCount: 0, // 存量统计 ,
        accounts: 0, // 应收回款 ,
        overdue: 0, // 逾期应收 ,
        undue: 0 // 未到期应收
      },
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    // 工程进度
    async fetchProjectProgressArr() {
      try {
        const params = {
          queryType: "27008"
        };
        const res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "projectProgressArr", result.list);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 应收账款
    async fetchReceivableAccount() {
      try {
        const params = {
          queryType: "27007"
        };
        const res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "receivableAccountArr", result.list);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 认购和签约量
    async fetchSubscribeSign() {
      try {
        const params = {
          queryType: "27006"
        };
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "subscribeSignArr", result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 存量分析
    async fetchStockAna() {
      try {
        const params = {
          queryType: "27005"
        };
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.allUserNumber = result.total; // 用户总数
          this.$set(this, "stockAnalysisArr", result.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    setTimeAccuracy() {
      const day = "4001";
      const month = "4003";
      if (this.defaultTimeType === "3009") {
        return month;
      } else if (this.defaultTimeType === "3010") {
        return month;
      } else {
        return day;
      }
    },
    // 成交均价走势
    async fetchDealAveragePrice() {
      try {
        const timeAcc = this.setTimeAccuracy();
        const params = {
          timeType: this.defaultTimeType,
          queryType: "27004",
          timeAccuracy: timeAcc,
          realEstateTypeForTwo: this.dealType
        };
        const res = await GetDetailList(params);
        if (res && res.data) {
          this.$set(this, "dealAceragePriceData", res.data.result.list);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 成交量趋势
    async fetchDealTrendData() {
      try {
        const timeAcc = this.setTimeAccuracy();
        const params = {
          timeType: this.defaultTimeType,
          queryType: "27002",
          timeAccuracy: timeAcc
        };
        const res = await GetDoubleDetailList(params);
        if (res && res.data) {
          this.$set(this, "dealTrendData", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 成交面积趋势
    async fetchDealArea() {
      try {
        const timeAcc = this.setTimeAccuracy();
        const params = {
          timeType: this.defaultTimeType,
          queryType: "27001",
          timeAccuracy: timeAcc
        };
        const res = await GetDoubleDetailList(params);
        if (res && res.data) {
          this.$set(this, "dealAreaData", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 成交金额统计
    async fetchVolumeMoney() {
      try {
        var params = {
          timeType: this.defaultTimeType,
          queryType: "27003"
        };
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          if (result.list.length > 0) {
            result.list[0].startColor = "#31cee6";
            result.list[0].endColor = "#6937fd";
          }
          this.$set(this, "volumeMoney", res.data.result.total);
          this.$set(this, "volumeMoneyData", res.data.result.list);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 成交量
    async fetchVolume() {
      try {
        var params = {
          timeType: this.defaultTimeType,
          queryType: "27002"
        };
        var res = await GetDataByTargetForTwo(params);
        if (res && res.data) {
          this.$set(this, "volumeTotal", res.data.result.total);
          this.$set(this, "volumeData", res.data.result.list);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取地产汇总数据信息
    async fetchDataProfileInfoForHousing(num) {
      try {
        var res = await GetDataProfileInfoForHousing();
        if (res.data.code === "0") {
          this.$set(this, "endVal", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 成交面积统计
    async fetchHouseAmount() {
      var params = {
        timeType: this.defaultTimeType,
        queryType: "27001"
      };
      try {
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          var sum = 0;
          resData.forEach(item => {
            sum += Number(item.value);
          });
          this.$set(this, "areaStatisticsVal", sum);
          this.$set(this, "areaStatisticsOption", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    fetchData() {
      this.fetchVolumeMoney(); // 成交金额统计
      this.fetchDataProfileInfoForHousing(); // 获取地产汇总数据信息
      this.fetchHouseAmount(); // 成交面积统计
      this.fetchVolume(); // 成交量
      this.fetchDealArea(); // 成交面积趋势
      this.fetchDealTrendData(); // 成交量趋势
      this.fetchDealAveragePrice(); // 成交均价走势
      this.fetchStockAna(); // 存量分析
      this.fetchSubscribeSign(); // 认购及签约量
      this.fetchReceivableAccount(); // 应收账款
      this.fetchProjectProgressArr(); // 工程进度
    }
  }
};
</script>
<style lang="scss">
@import "../../../../styles/element-ui/radioBtn/radioBtnBlue.scss";
</style>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";
.topCon-5 {
  display: flex;
  justify-content: center;
  width: calc(100% / 5);
  /* height: 370px; */
  padding: 46px 40px; /* 30px => 46px 40px */
  margin-top: 30px;
  /* margin-left: 2px; */
  margin-right: 20px;
  color: #2ff0d2;
  @include moduleBg(bg_459x333);
}
.topCon-5:nth-last-of-type(1) {
  margin-right: 0;
}
.itemTop-tit {
  width: 100%;
  text-align: left;
}
.itemTop-val {
  width: 100%;
  margin-top: 40px;
}
.itemTop-val-row {
  margin-top: 40px;
  width: 100%;
}
.itemTop-val-row .item {
  width: 49%;
  display: inline-block;
}
.itemTop-val-row .item-3 {
  width: 32%;
  display: inline-block;
}
.itemTop-val-row .item-3 .itemTopText,
.itemTop-val-row .item .itemTopText {
  font-size: 16px;
  margin-left: 10px;
}
.itemTop-val-row .item-3 .boldFont span,
.itemTop-val-row .item .boldFont span {
  font-size: 30px;
  margin-left: 10px;
}
.itemTopText {
  font-size: 20px;
}
.itemTopText-1 {
  font-size: 20px;
  margin-top: 90px;
}

.dcLineImg {
  width: 1780px;
  height: 8px;
  margin-left: 20px;
  color: #2ff0d2;
  @include bgImg(minLine);
}
.chartLine {
  width: 1px;
  height: 340px;
  background: rgba(#31cee6, .2);
  position: absolute;
  right: 0;
  top: 10%;
}
.minTopLeftCon {
  position: relative;
  /* margin-top: 10px; */
}
.topRightLLine {
  display: flex;
  align-items: center;
  @include absoluteTopLeft(10px, 40px);
  width: 100%;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}
.topRightLTopTitle .song {
  font-family: "宋体";
}
.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  /* margin-top: 6px; */
  background: #2ff0d2;
}
.topCon-5 span {
  font-size: 50px;
  /* line-height: 60px; */
  margin-top: 2px;
}
.topCon-5 .itemTop-val-row span {
  line-height: 30px;
}
.topRightCon {
  @include flex-dr-jsa;
  width: 1813px;
  margin-top: 20px;
  color: #2ff0d2;
  @include moduleBg(bg_1813x393);
}
.itemTop {
  text-align: center;
  color: #2ff0d2;
}
.changeCen-i {
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-top: 6px;
  margin-right: 6px;
  background-color: #2ff0d2;
}

/* 自定义flex */
.midCon-dc {
  @include flex-dc-jsb;
  width: 100%; /* 1820px => 100% */
  /* height: 792px; */
  margin-top: 20px;
  color: #2ff0d2;
  @include moduleBg(bg_1813x792);
}
.topRightLTopTitleLine-dc {
  width: 3px;
  height: 14px;
  margin-top: 9px;
  background: #2ff0d2;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}
.topRightTextCon {
  display: flex;
}
.dcTopRightCon {
  position: absolute;
  right: 75px;
}
.dcTopRightCon .boldFont {
  font-size: 20px;
}
.dcViewBox {  
  /* height: 370px; */
  margin: 20px 0px;
  color: #2ff0d2;
  text-align: center;
  @include moduleBg(bg_1813x393);
}
</style>
